<template>
    <div class="main">
        <div class="content">
            <div class="breadcrumb">
                <div class="title">当前位置：</div>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><a href="/admin">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item>商户</el-breadcrumb-item>
                    <el-breadcrumb-item>添加商户</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="cont">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
                    <el-form-item label="商户类型" prop="p29_mch_type">
                        <el-radio-group v-model="ruleForm.p29_mch_type" @change="change_Mch_Type">
                            <el-radio label="1">个人</el-radio>
                            <el-radio label="2">个体</el-radio>
                            <el-radio label="3">企业</el-radio>
                            <el-radio label="4">事业</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="商户号" prop="p2_mch_id">
                        <el-input v-model="ruleForm.p2_mch_id" placeholder="商户号"></el-input>
                    </el-form-item>
                    <el-form-item label="商户名称" prop="shopname">
                        <el-input v-model="ruleForm.shopname" placeholder="商户名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商家密码" prop="">
                        <el-input v-model="ruleForm.p31_pwd" placeholder="商家密码"></el-input>
                    </el-form-item>
                    <el-form-item label="商户简称" prop="">
                        <el-input v-model="ruleForm.p4_mch_name_short" placeholder="商户简称"></el-input>
                    </el-form-item>
                    <el-form-item label="商户logo" prop="logo">
                        <el-upload
                        class="upload-demo"
                        :action="uploadImg"
                        :on-success="imgSuccess"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="主营项目" prop="mainprojects">
                        <el-input v-model="ruleForm.mainprojects" placeholder="主营项目"></el-input>
                    </el-form-item>
                    <el-form-item label="绑定用户" prop="memberid">
                        <el-select v-model="ruleForm.memberid" placeholder="请选择" @change="changeSelect">
                            <el-option
                            v-for="item in userlist"
                            :key="item.id"
                            :label="item.nickname"
                            :value="item.id">
                            <div class="userinfo" style="display: flex;align-items: center;">
                                <img :src="item.avatar" alt="" srcset="" width="30" height="30">
                                <span>{{item.nickname}}</span>
                            </div>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商户分类" prop="shopcate">
                        <el-input v-model="ruleForm.shopcate" placeholder="商户分类" ></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="nickname">
                        <el-input v-model="ruleForm.nickname" placeholder="联系人" ></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="服务电话" prop="p11_service_phone">
                        <el-input v-model="ruleForm.p11_service_phone"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="p12_contact_man">
                        <el-input v-model="ruleForm.p12_contact_man" placeholder="请输入联系人/法人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="p13_id_card_no">
                        <el-input v-model="ruleForm.p13_id_card_no" placeholder="请输入联系人/法人身份证号"></el-input>
                    </el-form-item>
                    <el-form-item label="开始日期" prop="p33_id_card_start_date">
                        <el-input v-model="ruleForm.p33_id_card_start_date" placeholder="法人或负责人身份证有效期开始日期"></el-input>
                    </el-form-item>
                    <el-form-item label="结束日期" prop="p34_id_card_end_date">
                        <el-input v-model="ruleForm.p34_id_card_end_date"  placeholder="法人或负责人身份证有效期结束日期"></el-input>
                    </el-form-item>
                    <el-form-item label="执照类型" prop="p18_license_type">
                        <el-radio-group v-model="ruleForm.p18_license_type">
                            <el-radio label="0">营业执照</el-radio>
                            <el-radio label="1">营业执（多证合一)</el-radio>
                            <el-radio label="2">事业单位法人证书</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="执照注册号" prop="p14_license_num">
                        <el-input v-model="ruleForm.p14_license_num" placeholder="请输入营业执照注册号"></el-input>
                    </el-form-item>
                    <el-form-item label="经营范围" prop="p15_license_scope">
                        <el-input v-model="ruleForm.p15_license_scope" placeholder="请输入营业执照经营范围"></el-input>
                    </el-form-item>
                    <el-form-item label="开始日期" prop="p16_license_start_date">
                        <el-input v-model="ruleForm.p16_license_start_date" placeholder="请输入营业执照有效期开始日期"></el-input>
                    </el-form-item>
                    <el-form-item label="结束日期" prop="p17_license_end_date">
                        <el-input v-model="ruleForm.p17_license_end_date" placeholder="请输入营执照有效期结束日期"></el-input>
                    </el-form-item>
                    <el-form-item label="商户简介" prop="synopsis">
                        <el-input v-model="ruleForm.synopsis"></el-input>
                    </el-form-item>
                    <el-form-item label="商户地址" prop="address">
                        <el-input v-model="ruleForm.address"></el-input>
                    </el-form-item>
                    <el-form-item label="商户电话" prop="shopphone">
                        <el-input v-model="ruleForm.shopphone"></el-input>
                    </el-form-item>
                    <el-form-item label="商户位置" prop="lng">
                        <div class="address">
                            <el-input v-model="ruleForm.lng" placeholder="地理经度"></el-input>
                            <el-input v-model="ruleForm.lat" placeholder="地理纬度"></el-input>
                            <el-button @click="positionShow=true">选择坐标</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="是否推荐" prop="is_tui">
                        <el-radio-group v-model="ruleForm.is_tui">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- <div class="title">
                        账号信息           
                    </div>
                    <el-form-item label="主账户名" prop="">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="主账户密码" prop="">
                        <el-input v-model="ruleForm.pwd"></el-input>
                    </el-form-item> -->
                    <div class="title">
                        商户备注           
                    </div>
                    <el-form-item label="商户备注" prop="">
                        <el-input type="textarea" :rows="3" v-model="ruleForm.shop_remarks"></el-input>
                    </el-form-item>
                    <div class="title">
                        入驻状态           
                    </div>
                    <el-form-item label="状态" prop="">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio label="1">申请中</el-radio>
                            <el-radio label="2">允许入驻</el-radio>
                            <el-radio label="3">暂停中</el-radio>
                            <el-radio label="-1">申请失败</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div class="title">
                        商户结算           
                    </div>
                    <el-form-item label="联行号" prop="p23_bank_no">
                        <el-input v-model="ruleForm.p23_bank_no" placeholder="请输入结算银行卡联行号"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡类型" prop="p24_bank_type">
                        <el-radio-group v-model="ruleForm.p24_bank_type">
                            <el-radio label="1">对公</el-radio>
                            <el-radio label="2">对私</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="结算卡卡号" prop="p25_bank_account">
                        <el-input v-model="ruleForm.p25_bank_account" placeholder="请输入结算卡卡号"></el-input>
                    </el-form-item>
                    <el-form-item label="开户人姓名" prop="p26_bank_owner">
                        <el-input v-model="ruleForm.p26_bank_owner" placeholder="请输入银结算行卡开户人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="p27_bank_idcard">
                        <el-input v-model="ruleForm.p27_bank_idcard" placeholder="请输入结算银行卡开户人身份证号"></el-input>
                    </el-form-item>
                    <el-form-item label="预留手机号" prop="p28_bank_mobile">
                        <el-input v-model="ruleForm.p28_bank_mobile" placeholder="请输入结算银行卡预留手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="员工帐号" prop="p30_username">
                        <el-input v-model="ruleForm.p30_username" placeholder="该商户绑定给的员工帐号，如为空则默认绑定给该渠道商默认的用户"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="抽成比例" prop="">
                        <el-input v-model="ruleForm.chou_scale"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="p10_email">
                        <el-input v-model="ruleForm.p10_email"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
                
            </div>
        </div>
          <Position @change="changemap" v-if="positionShow" @position="getposition" :dialog-visible.sync="positionShow" />
    </div>
</template>
<script>
import Position from '../../components/Map'
export default {
    components:{
        Position
    },
    data(){
        return{
            loading:false,
            userlist:{},//用户列表
            uploadImg:this.$api.upload,
            positionShow:false,
            position:[],
            ruleForm: {
                shopname: '',//商户名称
                memberid:'',//绑定用户id
                openid:'',
                logo:'',//logo
                mainprojects:'',//主营项目
                shopcate:'',//商户分类
                nickname:'',//联系人
                phone:'',//联系人电话
                synopsis:'',//商户简介
                address:'',//商户地址
                shopphone:'',//商户电话
                lng:'',//经度
                lat:'',//纬度
                is_tui:"0",//是否推荐 1是 0否
                // username:'',//主账户名
                // pwd:'',//主账户密码
                shop_remarks:'',//商户备注
                chou_scale:'',//抽成比例
                splitBillAccount:'',//收款人邮箱
                status:"1",//入驻状态 1 待入驻 2允许入驻 3暂停中

                p29_mch_type:'1',//商户类型
                p2_mch_id:'',//商户号
                p4_mch_name_short:'',//商户简称
                p10_email:'',//邮箱
                p11_service_phone:'',//服务电话
                p12_contact_man:'',//联系人/法人姓名
                p13_id_card_no:'',//联系人/法人身份证号
                p14_license_num:'',//营业执照注册号（商户类型为个体、企业必填)
                p15_license_scope:'',//营业执照经营范围（个体、企业必填)
                p16_license_start_date:'',//营业执照有效期开始日期，如20150130（商户类型为个体、企业必填)
                p17_license_end_date:'',//营执照有效期结束日期，如20150130,长久有效的请输入20991231（商户类型为个体、企业必填)
                p18_license_type:'0',//商户营业执照类型
                p23_bank_no:'',//结算银行卡联行号
                p24_bank_type:'1',//结算银行卡类型
                p25_bank_account:'',//结算卡卡号
                p26_bank_owner:'',//银结算行卡开户人姓名
                p27_bank_idcard:'',//结算银行卡开户人身份证号
                p28_bank_mobile:'',//结算银行卡预留手机号
                p30_username:'',//该商户绑定给的员工帐号，如为空则默认绑定给该渠道商默认的用户
                p31_pwd:'',//商家密码如果为空，则添加模式下为默认密码;修改模式下不修改原有密码。
                p33_id_card_start_date:'',//法人或负责人身份证有效期开始日期
                p34_id_card_end_date:'',//法人或负责人身份证有效期结束日期

            },
            rules: {
                shopname: [
                    { required: true, message: '请输入商户名称', trigger: 'blur' }
                ],
                memberid: [
                    { required: true, message: '请选择绑定用户', trigger: 'change' }
                ],
                logo: [
                    { required: true, message: '请上传logo', trigger: 'change' }
                ],
                mainprojects: [
                    { required: true, message: '请输入主营项目', trigger: 'blur' }
                ],
                shopcate: [
                    { required: true, message: '请输入商户分类', trigger: 'blur' }
                ],
                nickname: [
                    { required: true, message: '请输入联系人', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入联系人电话', trigger: 'blur' }
                ],
                shopphone: [
                    { required: true, message: '请输入商户电话', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入商户地址', trigger: 'blur' }
                ],
                lng: [
                    { required: true, message: '请输入商户位置', trigger: 'change' }
                ],
                is_tui: [
                    { required: true, message: '请选择是否推荐', trigger: 'change' }
                ],
                splitBillAccount: [
                    { required: true, message: '请输入收款人邮箱', trigger: 'blur' }
                ],
                p2_mch_id:[
                    { required: true, message: '请输入商户号', trigger: 'blur' },
                    { required: true, pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/, message: '商户号格式不正确', trigger: 'change' },
                ],
                p11_service_phone: [
                    { required: true, message: '请输入服务电话', trigger: 'blur' }
                ],
                p12_contact_man: [
                    { required: true, message: '请输入联系人/法人姓名', trigger: 'blur' }
                ],
                p13_id_card_no: [
                    { required: true, message: '请输入联系人/法人身份证号', trigger: 'blur' }
                ],
                p33_id_card_start_date: [
                    { required: true, message: '请输入法人或负责人身份证有效期开始日期', trigger: 'blur' }
                ],
                p34_id_card_end_date: [
                    { required: true, message: '请输入法人或负责人身份证有效期开始日期', trigger: 'blur' }
                ],
                p14_license_num:null,
                p15_license_scope:null,
                p16_license_start_date:null,
                p17_license_end_date:null,
                p23_bank_no:[
                    { required: true, message: '请输入结算银行卡联行号', trigger: 'blur' }
                ],
                p25_bank_account:[
                    { required: true, message: '请输入结算卡卡号', trigger: 'blur' }
                ],
                p26_bank_owner:[
                    { required: true, message: '请输入银结算行卡开户人姓名', trigger: 'blur' }
                ],
                p27_bank_idcard:[
                    { required: true, message: '请输入结算银行卡开户人身份证号', trigger: 'blur' }
                ],
                p28_bank_mobile:[
                    { required: true, message: '请输入结算银行卡预留手机号', trigger: 'blur' }
                ]
            },
            fileList: []
        }
    },
    mounted(){
        this.getuserinfolist()
        console.log(this.$route)
        if (this.$route.params.id!='none') {
            this.getDetail(this.$route.params.id)
        }
    },
    computed:{
        geturl(){
            return this.$route.params.id=='none'?this.$api.shop_create:this.$api.lineup_shop_update
        }
    },
    methods:{
        //选择商户种类
        change_Mch_Type(e){
            console.log(e)
            if (e==2||e==3) {
                this.rules.p14_license_num = [
                    { required: true, message: '请输入营业执照注册号', trigger: 'blur' }
                ]
                this.rules.p15_license_scope = [
                    { required: true, message: '请输入营业执照经营范围', trigger: 'blur' }
                ]
                this.rules.p16_license_start_date = [
                    { required: true, message: '请输入营业执照有效期开始日期', trigger: 'blur' }
                ]
                this.rules.p17_license_end_date = [
                    { required: true, message: '请输入营执照有效期结束日期', trigger: 'blur' }
                ]
                this.rules.p18_license_type = [
                    { required: true, message: '请选择商户营业执照类型', trigger: 'change' }
                ]
            }else{
                this.rules.p14_license_num = null
                this.rules.p15_license_scope = null
                this.rules.p16_license_start_date = null
                this.rules.p17_license_end_date = null
                this.rules.p18_license_type = null
                this.$refs['ruleForm'].clearValidate('p14_license_num');
                this.$refs['ruleForm'].clearValidate('p15_license_scope');
                this.$refs['ruleForm'].clearValidate('p16_license_start_date');
                this.$refs['ruleForm'].clearValidate('p17_license_end_date');
                this.$refs['ruleForm'].clearValidate('p18_license_type');
            }
        },
        changemap(e){
            console.log(e)
            this.positionShow =e.show
        },
        //获取详情
        async getDetail(e){
            let{data:{result}} = await this.$http.get(this.$api.lineup_shop_show,{id:e})
            this.ruleForm = result.shop_info
            this.fileList.push({url:result.shop_info.logo})
        },
        //绑定用户切换
        changeSelect(){
            this.userlist.forEach(item => {
                if (item.id == this.ruleForm.memberid) {
                    this.ruleForm.openid = item.openid
                }
            });
        },
        //
        getposition(e){
            console.log(e)
            this.ruleForm.lng = e[0]
            this.ruleForm.lat = e[1]
            this.positionShow = false
        },
        //文件移除时
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.ruleForm.logo = ''
        },
        //上传成功
        imgSuccess(e) {
            console.log(e);
            this.fileList = []
            this.ruleForm.logo = e.url
            this.fileList.push(e)
        },
        //提交创建
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.submit()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async submit(){
            let ruleForm = new FormData()
            if (this.ruleForm.id) {
                ruleForm.append('id',this.ruleForm.id)
            }
            ruleForm.append('shopname',this.ruleForm.shopname)
            ruleForm.append('memberid',this.ruleForm.memberid)
            ruleForm.append('openid',this.ruleForm.openid)
            ruleForm.append('logo',this.ruleForm.logo)
            ruleForm.append('mainprojects',this.ruleForm.mainprojects)
            ruleForm.append('shopcate',this.ruleForm.shopcate)
            ruleForm.append('nickname',this.ruleForm.nickname)
            ruleForm.append('phone',this.ruleForm.phone)
            ruleForm.append('synopsis',this.ruleForm.synopsis)
            ruleForm.append('address',this.ruleForm.address)
            ruleForm.append('shopphone',this.ruleForm.shopphone)
            ruleForm.append('lng',this.ruleForm.lng)
            ruleForm.append('lat',this.ruleForm.lat)
            ruleForm.append('is_tui',this.ruleForm.is_tui)
            // ruleForm.append('username',this.ruleForm.username)
            // ruleForm.append('pwd',this.ruleForm.pwd)
            ruleForm.append('shop_remarks',this.ruleForm.shop_remarks)
            ruleForm.append('chou_scale',this.ruleForm.chou_scale)
            ruleForm.append('splitBillAccount',this.ruleForm.splitBillAccount)
            ruleForm.append('status',this.ruleForm.status)

            ruleForm.append('p29_mch_type',this.ruleForm.p29_mch_type)
            ruleForm.append('p2_mch_id',this.ruleForm.p2_mch_id)
            ruleForm.append('p4_mch_name_short',this.ruleForm.p4_mch_name_short)
            ruleForm.append('p10_email',this.ruleForm.p10_email)
            ruleForm.append('p11_service_phone',this.ruleForm.p11_service_phone)
            ruleForm.append('p12_contact_man',this.ruleForm.p12_contact_man)
            ruleForm.append('p13_id_card_no',this.ruleForm.p13_id_card_no)
            ruleForm.append('p14_license_num',this.ruleForm.p14_license_num)
            ruleForm.append('p15_license_scope',this.ruleForm.p15_license_scope)
            ruleForm.append('p16_license_start_date',this.ruleForm.p16_license_start_date)
            ruleForm.append('p17_license_end_date',this.ruleForm.p17_license_end_date)
            ruleForm.append('p18_license_type',this.ruleForm.p18_license_type)
            ruleForm.append('p23_bank_no',this.ruleForm.p23_bank_no)
            ruleForm.append('p24_bank_type',this.ruleForm.p24_bank_type)
            ruleForm.append('p25_bank_account',this.ruleForm.p25_bank_account)
            ruleForm.append('p26_bank_owner',this.ruleForm.p26_bank_owner)
            ruleForm.append('p27_bank_idcard',this.ruleForm.p27_bank_idcard)
            ruleForm.append('p28_bank_mobile',this.ruleForm.p28_bank_mobile)
            ruleForm.append('p30_username',this.ruleForm.p30_username)
            ruleForm.append('p31_pwd',this.ruleForm.p31_pwd)
            ruleForm.append('p33_id_card_start_date',this.ruleForm.p33_id_card_start_date)
            ruleForm.append('p34_id_card_end_date',this.ruleForm.p34_id_card_end_date)

            this.loading = true
            let {data:{status,result}} = await this.$http.post(this.geturl,ruleForm)
            this.loading = false
            if (status == 0) {
                this.$notify({
                    title: '成功',
                    message: result.msg,
                    type: 'success'
                });
                this.$router.push({ path: '/merchant/list' })
            }

        },
        //返回
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //获取用户列表
        async getuserinfolist(){
            let{data:{status,result}} = await this.$http.post(this.$api.lineup_shop)
            if (status == 0) {
                this.userlist = result
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .main{
        display: flex;
        .content{
            padding: 20px;
            width: 100%;
            .breadcrumb{
                display: flex;
                align-items: center;
            }
            .cont{
                background-color: #ffffff;
                padding: 20px 30px;
                margin-top: 20px;
                .ruleForm{
                    width: 60%;
                    .title{
                        margin: 15px 0;
                        font-weight: 600;
                        border-left: 3px solid rgb(0, 140, 255);
                        font-size: 14px;
                        line-height: 18px;
                        padding-left: 10px;
                    }
                    .el-form-item{
                        margin-left:40px;
                        .address{
                            display: flex;
                            >div{
                                margin-right: 15px;
                               
                            }
                            button{
                                height: 40px;
                                
                            }
                        }
                        
                    }
                }
            }
           
        }
        
    }
</style>